<template>
  <section class="w-[100vw] h-[100vh] bg-pink-200 flex flex-wrap overflow-hidden">
    <!-- 顶部导航栏 -->
    <section class="w-full h-[50px] select-none">
      <div class=" h-full flex px-3 bg-[#e5e7eb] text-center leading-[50px]">
        <img class="w-[30px] h-[30px] m-[10px]" src="@/assets/img/tab/logo.png" alt="">
        My To Do
      </div>
    </section>
    <!-- 侧边导航栏 -->
    <section class="w-[200px] h-[calc(100vh-50px)] bg-gray-200 relative ">
      <div class="flex w-[200px] h-[50px]  select-none">
        <img class="w-[50px] h-[50px]  rounded-full" src="@/assets/img/other/甘雨.png" alt="">
        <div class=" h-full truncate w-[calc(100%-50px)] p-[10px]">
          <p>帅气的小苏</p>
          <p class="text-[12px] text-gray-400">sjyxxx@outlook.com</p>
        </div>
      </div>
      <div class="flex w-[200px] h-[50px] py-[10px] px-[15px]  ">
        <input class="w-[60%] bg-white rounded-l-[5px] p-[5px]" placeholder="搜索" type="text" name="" id="">
        <button class="w-[40%] bg-white ">搜索</button>
      </div>

      <!-- 列表 -->
      <div>
        <ul>
          <li>
            <router-link :style="$route.meta.name === 'myDay' ? 'background-color:#cbcbcb' : ''" class="h-[50px] leading-[50px] hover:bg-[#cbcbcb] flex" to="/">
              <img class="h-[50%] m-[10px]" src="@/assets/img/tab/sun.png" alt="">
              我的一天
              <div class="absolute right-[10px] text-[12px] text-gray-500"> {{ taskStore.task_list.length }}</div>
            </router-link>
          </li>
          <li>
            <router-link :style="$route.meta.name === 'important' ? 'background-color:#cbcbcb' : ''" class="h-[50px] leading-[50px] hover:bg-[#cbcbcb] flex" to="/important">
              <img class="h-[50%] m-[10px]" src="@/assets/img/tab/star.png" alt="">
              重要
              <div class="absolute right-[10px] text-[12px] text-gray-500"> {{ important_length }}</div>
            </router-link>
          </li>
          <!-- <li>
            <router-link class="h-[50px] leading-[50px] hover:bg-[#cbcbcb] flex" to="/">
              <img class="h-[50%] m-[10px]" src="@/assets/img/tab/plan.png" alt="">
              计划内
            </router-link>
          </li>
          <li>
            <router-link class="h-[50px] leading-[50px] hover:bg-[#cbcbcb] flex" to="/">
              <img class="h-[50%] m-[10px]" src="@/assets/img/tab/person.png" alt="">
              已分配给我
            </router-link>
          </li>
          <li>
            <router-link class="h-[50px] leading-[50px] hover:bg-[#cbcbcb] flex" to="/">
              <img class="h-[50%] m-[10px]" src="@/assets/img/tab/flag.png" alt="">
              标记的电子邮件
            </router-link>
          </li> -->
          <li>
            <router-link class="h-[50px] leading-[50px] hover:bg-[#cbcbcb] flex" to="/test">
              <img class="h-[50%] m-[10px]" src="@/assets/img/tab/home.png" alt="">
              任务
            </router-link>
          </li>
        </ul>
      </div>

      <!-- 添加列表 -->
      <div class="absolute w-[200px] h-[50px]  bottom-0  ">
        <button class="w-[200px] h-[50px] hover:bg-[#cbcbcb]  pe-20">+ 添加列表</button>
      </div>
    </section>

    <!-- 内容 -->
    <section class="w-[calc(100%-200px)] h-[calc(100vh-50px)] ">
      <router-view></router-view>
    </section>

  </section>
</template>

<script setup>
import { taskUseStore } from "@/stores/index";
import { computed, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
const important_length = computed(() => {
  return taskStore.task_list.filter(item => item.isImportant === true).length
})
const taskStore = taskUseStore();
let path = ref("")
const route = useRoute()
path.value = route.path
console.log(path.value)
watch(() => route.path, (newValue, oldValue) => {
  console.log(newValue)
})
</script>